<template>
  <el-container>
    <el-header class="cate_mana_header">
      <el-input placeholder="请输入栏目名称" v-model="cateName" style="width: 200px;">
      </el-input>
      <el-button type="primary" size="medium" style="margin-left: 10px">新增栏目</el-button>
    </el-header>
    <el-main class="cate_mana_main">
        <el-table
            ref="multipleTable"
            :data="categories"
            tooltip-effect="dark"
            style="width: 100%">
            <el-table-column  type="selection" width="55"></el-table-column>
            <el-table-column label="编号" width="120">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column prop="cateName" label="名称" width="120"></el-table-column>
            <el-table-column prop="date" label="启用时间"></el-table-column>
            <el-table-column  label="操作">
                删除  修改
            </el-table-column>
    </el-table>
    </el-main>
  </el-container>
</template>

<script>
import {getRequest} from '../utils/http'
export default {
    data(){
      return {
        cateName: '',
        selItems: [],
        categories: [],
        loading: false
      }
    },
    mounted: function () {
      this.loading = true;
      this.refresh();
    },
    methods: {
      refresh(){
        let _this = this;
        getRequest("/api/admin/category/all").then(resp=> {
          _this.categories = resp.data;
          _this.loading = false;
        }, resp=> {
          if (resp.response.status == 403) {
            _this.$message({
              type: 'error',
              message: resp.response.data
            });
          }
          _this.loading = false;
        });
      }
    }
}
</script>

<style>
  .cate_mana_header {
    background-color: #ececec;
    margin-top: 20px;
    padding-left: 5px;
    /* display: flex; */
    /* justify-content: flex-start; */
  }

  .cate_mana_main {
    /*justify-content: flex-start;*/
    display: flex;
    flex-direction: column;
    padding-left: 5px;
    background-color: #ececec;
    margin-top: 20px;
    padding-top: 10px;
  }
</style>